<template>
<div class="main">
    <h1>今日校园</h1>
    <div>
        <span>上次自动签到时间:{{$store.state.user.signTime === null ? '还有没哦' : signTime}}</span>
        <br>
        <span><el-checkbox v-model="signAutoChecked">自动打卡：{{ signAutoChecked ? '已开启' : '已关闭' }}</el-checkbox></span>
        <div>
            <span>每天早上8:30点自动打卡，只针对循环任务</span>
            <el-popover
            placement="bottom"
            width="200"
            trigger="click"
            content="test">
            带有<el-button size="mini" icon="el-icon-refresh" type="success">循环</el-button>标签的任务
            <i class="el-icon-question" slot="reference"></i>
            </el-popover>
        </div>
    </div>
    <h1>步道乐跑</h1>
    <div>
        <span>相关设置-手机参数设置-绑定手机号</span>
        <br>
        <span>修复了乐跑不能登录的bug</span>
    </div>
</div>
</template>

<script>
import { autoSign } from "@/api/user";

export default {
//import引入的组件需要注入到对象中才能使用
components: {},
props: {},
data() {
//这里存放数据
return {
    signAutoChecked: this.$store.state.user.signAuto == 0 ? true : false,
};
},
//计算属性 类似于data概念
computed: {
    signTime(){
        let time = this.$store.state.user.signTime;
        var date = new Date(parseInt(time));
        var YY = date.getFullYear() + '-';
        var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        var hh = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
        var mm = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
        var ss = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
        return YY + MM + DD +" "+hh + mm + ss;
    }
},
//监控data中的数据变化
watch: {
    signAutoChecked(){
      this.$store.commit('user/SET_SIGNAUTO',this.signAutoChecked === true ? 0:1);
      console.log(this.$store.state.user.signAuto);
      autoSign({ signAuto: this.$store.state.user.signAuto}).then((response)=>{
        if(response.code == 0){
          this.$message({
              type: "success",
              message: "修改成功!",
            });
        }
      })
      .catch((err) => {this.$message.error(err.message)});
    }
},
//方法集合
methods: {},
//声明周期 - 创建完成（可以访问当前this实例）
created() {},
//声明周期 - 挂载完成（可以访问DOM元素）
mounted() {},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.main{
    margin: 20px;
}
.el-button--mini {
    padding: 2px 3px;
    font-size: 12px;
    border-radius: 3px;
}
.el-button--success {
    color: #FFFFFF;
    background-color: #8DD5A9;
    border-color: #8DD5A9;
}
</style>